<template>
  <form>
    <slot></slot>
  </form>
</template>

<script>
export default {
  name: 'Form',
  provide() {
    return {
      form: this
    }
  },
  props: {
    model: {
      required: true,
      type: Object,
      default: () => { }
    },
    rules: {
      required: true,
      type: Object,
      default: () => { }
    },
    type: {
      required: true,
      type: String,
      default: ''
    }
  },
  methods: {
    async validate() {
      return await this.$children.filter(item => item.prop).reduce(async (next, current) => {
        const nextResult = await next
        if (nextResult.status == false || !nextResult) return nextResult
        return await current.validate()
      }, { status: true })
    }
  }
}
</script>

<style>
form {
  font-size: 0;
}
</style>